@import url("main_styling.css");

.text_with_image>img {
    -o-object-position: 35%;
       object-position: 35%;
}

.resume {
    position: relative;
    width: 90%;
    height: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: top;
        -ms-flex-align: top;
            align-items: top;
    gap: 4rem 8rem;


    --TESTCOLOR: transparent;
    border: 1px solid var(--TESTCOLOR);
}

.resume_left_column {
    position: relative;
    width: 20%;
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2.5rem;

    text-align: center;

    border: 1px solid var(--TESTCOLOR);
}

.resume_left_column_content h3 {
    margin-bottom: 0.5rem;
    word-spacing: normal;
    text-transform: none;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.4rem;
}

.rlcc_class {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    gap: 0.5rem;
}

.rlcc_class p {
    width: 50%;
    min-width: 10rem;
    text-wrap: nowrap;
}

.rlcc_left {
    text-align: right;
}

.rlcc_right {
    text-align: left;
}

.rlcc_right p {
    font-weight: 300;
    font-style: italic;
}





.resume_right_column {
    position: relative;
    width: auto;
    max-width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    border: 1px solid var(--TESTCOLOR);
}

.rrc_content {
    position: relative;
    width: 100%;
    margin-block: 1rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: left;
        -ms-flex-align: left;
            align-items: left;
}

.rrc_content h3 {
    text-align: left;
    text-transform: normal;
    font-weight: 500;
    letter-spacing: normal;
    word-spacing: 0.2rem;
}

.rrc_content h4 {
    font-size: small;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    word-spacing: 0.2rem;
}

.rrc_content p {
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    font-weight: 300;
    font-style: italic;
}

.rrc_content ul {
    border-left: 1px solid white;
    list-style-type: none;
}

.rrc_content li {
    padding-left: 0.4rem;
}

.rcc_devider {
    -ms-flex-item-align: start;
        align-self: flex-start;
    width: 50%;
    height: 0;
    border-top: 1px solid white;
}


@media (max-width: 600px) {

    .rrc_content h3 {
        text-align: center;
    }

    .rrc_content h4 {
        text-align: center;
    }

    .rrc_content p {
        margin-left: 1.5rem;
    }

    .rrc_content ul {
        margin-left: 1rem;
    }

    .rcc_devider {
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
        width: 0;
        height: 2rem;
        border: none;
        border-left: 1px solid white;
    }
}















.filmography {
    position: relative;
    width: 90%;
    height: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2rem;
}

.filmography_row {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 3rem;
}

.filmography_row p {
    width: 20rem;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    max-width: 30%;
}

#fgr_year {
    width: 5rem;
    text-align: end;
    font-weight: 200;
    letter-spacing: 0.4rem;
}

#fgr_titel {
    font-weight: 900;
    letter-spacing: 0.3rem;
    font-size: large;
    font-style: italic;
    text-align: end;
}

#fgr_role {
    text-align: end;
}



@media (max-width: 800px) {
    .filmography {
        gap: 0.5rem;
    }

    .filmography_row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 0.2rem;
    }

    .filmography_row::after {
        content: '';
        width: 0;
        height: 2rem;
        border-left: 1px solid white;
    }

    .filmography_row:last-child::after {
        display: none;
    }

    .filmography_row #fgr_year {
        --fgr_p_width: 100%;
        --fgr_p_max-width: 100%;
        --fgr_p_text-align: center;

        width: var(--fgr_p_width);
        max-width: var(--fgr_p_max-width);
        text-align: var(--fgr_p_text-align);
    }

    .filmography_row #fgr_titel {
        width: var(--fgr_p_width);
        max-width: var(--fgr_p_max-width);
        text-align: var(--fgr_p_text-align);
    }

    .filmography_row #fgr_role {
        width: var(--fgr_p_width);
        max-width: var(--fgr_p_max-width);
        text-align: var(--fgr_p_text-align);
    }
}



.links_to_socials {
    width: 90%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2rem;
}